<template>
<section>
    <div class="custorm--modelbox graphicnotice-edit">
        <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange"></renohome-right-nav>
        <div class="edit-form-item">
            <div class="form-label">上下边距</div>
            <div class="flex-row flex-align-c">
                <el-slider :show-tooltip="false" style="width: 70%;" v-model="margincol" input-size="mini" :max="48">
                </el-slider>
                <div class="coupon-showslider">{{custormItemData.style.margincol}}px</div>
            </div>
            <div class="form-label">左右边距</div>
            <div class="flex-row flex-align-c">
                <el-slider :show-tooltip="false" style="width: 70%;" v-model="marginrow" input-size="mini" :max="48">
                </el-slider>
                <div class="coupon-showslider">{{custormItemData.style.marginrow}}px</div>
            </div>
        </div>
        <div class="edit-form-item">
            <div class="form-label">颜色选择</div>
            <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">背景颜色</span>
                <el-color-picker class="ivu-input" v-model="custormItemData.style.bgcolor" size="mini"></el-color-picker>
                <span class="ivu-input">{{custormItemData.style.bgcolor}}</span>
            </div>
            <div class="stylebox flex-row flex-align-c ivu-color-picker"><span style="margin-right:13px;">文字颜色</span>
                <el-color-picker class="ivu-input" v-model="custormItemData.style.textcolor" size="mini"></el-color-picker>
                <span class="ivu-input">{{custormItemData.style.textcolor}}</span>
            </div>
        </div>
        <div class="es-form-item">
            <div class="form-label">公告设置</div>
            <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                <span style="margin-right:13px;">图标</span>
                <div class="uploadSource solid"><i
                      class="delete ivu-icon iconfont icon-input_clear"
                      style="font-size: 16px;"
                    ></i>
                    <div class="img" @click="uploadtoggle" :style="{'background-image':`url(${getPath(custormItemData.params.thumb.file_path)})`,'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"></div>
                </div>
            </div>
            <div style="margin-top:20px;" class="stylebox flex-row flex-align-c">
                <span style="margin-right:13px;">内容</span>
                <el-input v-model="custormItemData.params.text" size="small"></el-input>
            </div>
        </div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  computed: {
    margincol: {
      set(value) {
        this.custormItemData.style.margincol = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.margincol)
      }
    },
    marginrow: {
      set(value) {
        this.custormItemData.style.marginrow = value
      },
      get() {
        return this.conversionType('number', this.custormItemData.style.marginrow)
      }
    }
  },
  methods: {
    uploadFileCallBack(files) {
      const { displayData: [file_path] } = files
      this.custormItemData.params.thumb = file_path
    },
    uploadtoggle() {
      this.output({ type: 'image', params: { editKey: this.custormItemData.key } })
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicnotice-edit {
    .es-notice.style1 {
        background: #f2f2f2;
    }

    .es-notice {
        border-radius: 4px;
        height: 36px;
        line-height: 40px;
    }

    .es-notice.style1 img {
        height: 18px;
        width: 18px;
        display: inline-block !important;
        vertical-align: middle;
        margin-right: 6px;
    }

    .es-notice.style2 {
        box-shadow: 4px 1px 20px #f2f2f2;
        background: #fff;
        white-space: nowrap;
    }

    .es-notice.style2 span {
        background: #ffe1e1;
        color: #ff4f4f;
        border-radius: 9px;
        display: inline-block;
        width: 32px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        margin-right: 6px;
    }
}
</style>
